import Common from '../utils/Common';
import { Version, VerisonListInterface } from '../../types';
import store from '../utils/store';
class VerisonList extends Common {
    constructor() {
        super();
    }
    // 重置按钮样式
    protected resetBtnsStyle():void{
        const that = this;
        const btns = document.getElementsByClassName('selectVersionBtn');
        Array.prototype.forEach.call(btns, function(btn:HTMLElement){
            btn.innerText = '选择';
            that.setStyle(btn,'color:#fff;border:none;background:#43CF7D;');
        });
    }
    // 搜索组件
    public getSearch({ theme, callback }: { theme: string, callback:Function }): HTMLElement {
        const searchBox = this.getDivofFlex();
        const searchBoxStyle = `
            width:100%;
            box-sizing:border-box;
            padding:11px 20px;
            border-bottom:1px solid #CBCBCB;
            background:#fff;
            position:absolute;
            top:0;
            left:0;
        `;
        this.setStyle(searchBox, searchBoxStyle);
        const nameTip: HTMLElement = this.getTipEle('版本名称：');
        const versionNameInput: HTMLElement = this.getInput({
            type: 'text',
            name: 'search-key-word',
            id:'search-key-word'
        })
        const versionNameInputStyle: string = `
            width:120px;
            height:25px;
            border-radius:2px;
            border:1px solid rgba(203,203,203,1);
            outline:none;
            text-indent:10px;
            box-sizing:border-box;
        `;
        const searchBtn: HTMLElement = this.getButton({
            width: 50,
            height: 25,
            text: '搜索',
            background: theme,
            color: '#fff',
            clickHandle: () => {
                const keyword:string = (document.getElementById('search-key-word') as HTMLInputElement).value;
                callback && callback(keyword);
            }
        });
        this.setStyle(searchBtn, 'margin-left:10px;');
        this.setStyle(versionNameInput, versionNameInputStyle);
        searchBox.appendChild(nameTip);
        searchBox.appendChild(versionNameInput);
        searchBox.appendChild(searchBtn);
        return searchBox;
    }
    // 版本列表item
    protected getVerisonItem({ name, id, checked }: Version): HTMLElement {
        const item = this.createDiv();
        const itemStyle = `
            width:100%;
            height:40px;
            line-height:40px;
            border-bottom: 1px solid #CBCBCB;
            overflow:hidden;
            box-sizing:border-box;
            padding:0 20px;
        `;
        const nameEle = this.createP();
        nameEle.innerText = name;
        const nameEleStyle = `
            max-width:80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height:40px;
            float:left;
            font-size:14px;
        `;
        this.setStyle(nameEle, nameEleStyle);
        const selectBtn: HTMLElement = this.getButton({
            width: 56,
            height: 25,
            text: '选择',
            background: '#43CF7D',
            color: '#fff',
            clickHandle: (e: any) => {
                this.resetBtnsStyle();
                this.setStyle(e.target, 'background:#fff;color:#000;border:1px solid #CBCBCB;');
                e.target.innerText = '已选择';
                store.setStore('versionID', id);
            }
        });
        if(checked){
            store.setStore('versionID', id);
            this.setStyle(selectBtn, 'background:#fff;color:#000;border:1px solid #CBCBCB;');
            selectBtn.innerText = '已选择';
        }
        this.setStyle(selectBtn, 'float:right;margin-top:8px;');
        selectBtn.className='selectVersionBtn';
        this.setStyle(item, itemStyle);
        item.appendChild(nameEle);
        item.appendChild(selectBtn);
        return item;
    }
    // 版本列表
    public getVersionList(list: VerisonListInterface): HTMLElement {
        const versionList: HTMLElement = this.createDiv();
        list.map(({ name, id, checked }: Version) => {
            versionList.appendChild(this.getVerisonItem({ name, id, checked }));
        });
        if(list.length===0){
            const empty = this.createP();
            empty.innerText = '暂无相关版本';
            this.setStyle(empty,'color:#999;text-align:center;line-height:260px;font-size:12px;');
            versionList.appendChild(empty);
        }
        return versionList;
    }
    
}

export default new VerisonList();